<template>
    <div class="app">
        <div class="head">
            <!-- <div ><i class="reutrn iconfont icon-fanhui" @click="$router.go(-1)"></i>植树节开福袋赢积分<i class="share iconfont icon-fenxiang1" @click=""></i></div> -->
        </div>
        <div class="flex avater-box">
            <div class="avater flex">
                <div class="avater-img">
									<image src="../../../static/lottery/apple.png" mode="scaleToFill"></image>
								</div>
                <div class="name">122</div>
            </div>
            <div class="flex integral">3685</div>
            
        </div>
        <!-- 规则 -->
        <div class="gz" @click="isRule=true"></div>
        <!-- 积分商城 -->
        <div class="jfsc" @click="go()"></div>
        <!-- 积分明细 -->
        <div class="jfmx" @click="go()"></div>
        <!-- 树 -->
        <div class="trees-box">
            <div class="tree">
                <div v-for="(item,index) in 10" class="box-position" :style="{zIndex: index==0&&nextStepIndex==1?'5':''}" :key="index" @click="chooseLuckyBag">
                    <div class="lucky-bag-box center">
                        <div class="lucky-bag-bg"></div>
                        <div class="lucky-bag"></div>
                    </div>
                </div>
            </div>
            <!-- 意见领取 -->
            <div class="receive" @click="chooseLuckyBag"></div>
            <div class="billboard">已拥有福袋：<span>34</span>只</div>
        </div>
        <!-- 按钮 -->
        <div class="yq-btn center" :style="{zIndex: nextStepIndex==2?'5':''}" @click="inviteFriends">邀请好友获得更多福袋</div>

        <!-- 活动指引 -->
        <div class="guide-box" @touchmove.stop.prevent v-if="guideWindow">
            <div class="guide">
                <div :class="['pointer',nextStepIndex==2?'pointer-1':'']"></div>
                <div class="pointer-txt-1" v-if="nextStepIndex==1"></div>
                <div class="pointer-txt-2" v-if="nextStepIndex==2"></div>
                <div :class="['zdl',nextStepIndex==2?'zdl-1':'']" @click="nextStep"></div>
            </div>
        </div>

        <!-- 邀请 | 未登录 | 活动结束 -->
        <div class="overlay center" @touchmove.stop.prevent v-if="show">
            <div class="box">
                <div class="close" @click="show=false"></div>
                <div class="box-top center">{{overlayTop}}</div>
                <div class="con center">
                    <p>恭喜你成功邀请1位好友</p>
                    <p>获得1只福袋</p>
                    <div class="center bag-box">
                        <div class="box-position">
                            <div class="lucky-bag-box center">
                                <div class="lucky-bag-bg"></div>
                                <div class="lucky-bag"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="p">{{overlayTxt}}</p>
                <div class="ok-btn center" @click="show=false">{{overlayBtnTxt}}</div>
            </div>
        </div>

        <!-- 活动规则 -->
        <div class="overlay center" @touchmove.stop.prevent v-if="isRule">
            <div class="rule">
                <div class="box-top center">活动规则</div>
                <div class="con">
                    <ul>
                        <li>新老用户参加活动即送一个幸运福袋，点击福袋即可爆高额礼品；</li>
                        <li>新老用户只有邀请新用户进来，才能获得更多福袋，每邀请1个新用户，即可获得1个福袋；</li>
                        <li>新老用户可以通过右上角的分享和页面下的邀请好友，只有邀请好友注册，才算邀请成功。</li>
                    </ul>
                    <div class="ok-btn center" @click="isRule=false">确定</div>
                </div>
                
            </div>
        </div>

        <!-- 获得积分 -->
        <div class="integral-window center"  v-if="isIntegral">
            <div class="box">
                <div class="close" @click="isIntegral=false"></div>
                <div class="box-top center">恭喜</div>
                <div class="con">
                    <h3>获得积分</h3>
										<p style="font-size: 12rpx;text-align: center;color: #999;">大于三个会滑动 小于三个会居中</p>
                    <div :class="['integral-box',length>3?'flex':'center'] ">
                        <div class="center integral-item" v-for="item in length">
                            <div class="integral-img"></div>
                            <p>125</p>
                        </div>
                        <div v-if="length>3" style="flex-shrink: 0;width:1rpx;height:2rpx;"></div>
                    </div>
                    <div class="goods-box">
                        <div class="box-tit">已有总积分 <span>5326</span></div>
                        <p>可兑换商品推荐</p>
                        <div class="goods-img">
													<image src="../../../static/lottery/apple.png" mode="scaleToFill"></image>
												</div>
                        <div class="goods-title">商品名称</div>
                    </div>
                    <div class="ok-btn center" @click="isIntegral=false">兑换</div>
                </div>
                <p class="p">不是想要的？</p>
                <div class="go-mall">去积分商城看看></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show:false,              // 邀请 | 未登录 | 活动结束
                isRule:false,           // 规则弹窗
                isIntegral:false,       // 获得积分
                guideWindow:true,       // 引导弹窗
                nextStepIndex: 1,       // 下一步的进度
                length:3,
                overlayTop:'邀请成功',
                overlayTxt:'快去点开福袋看看有什么惊喜~',
                overlayBtnTxt:'确定',

                
            }
        },
        watch:{
            nextStepIndex(v){
                this.guideWindow = v>2?false:true
            }
        },
        methods: {
            nextStep(){
                this.nextStepIndex ++
            },
            // 点击福袋
            chooseLuckyBag(){
                if(!this.guideWindow){
                    this.isIntegral = true
                }
            },
            // 邀请好友获得更多福袋
            inviteFriends(){

            },
						go(){},
        },
    }
</script>

<style lang="scss" scoped>
	*{padding: 0;margin: 0;}
	.app{min-height: 100vh;background: url('@/static/planting_trees/bg.png') no-repeat center center / cover;padding-bottom: 176rpx;user-select: none;;
			.head{height: 88rpx;padding: 0 48rpx;display: flex;color: #fff;font-size: 32rpx;text-align: center;justify-content: center;line-height: 88rpx;position: sticky;top: 0;z-index: 3;
					.reutrn{font-size: 48rpx;position: absolute;left: 32rpx;padding-right: 20rpx;}
					.share{font-size: 44rpx;position: absolute;right: 32rpx;padding-left: 20rpx;}
			}
			.avater-box{padding: 24rpx 32rpx 0 44rpx;position: fixed;top:112rpx;left: 0;right: 0;z-index: 3;
					.avater{font-size: 28rpx;color: #fff;margin-right: 48rpx;
							.avater-img{width: 72rpx;height: 72rpx;border-radius: 50%;margin-right: 16rpx;overflow: hidden;}
					}
					.integral{justify-content: flex-end;padding-right: 24rpx;color: #fff;font-size: 28rpx;width: 250rpx;height: 60rpx;background: url('@/static/planting_trees/integral.png') no-repeat center center / cover;text-align: right;}
			}
			.jfsc,.jfmx,.gz{position: fixed;right: 32rpx;z-index: 1;}
			.gz{background: url('@/static/planting_trees/gz.png')no-repeat center center / cover;width: 124rpx;height: 60rpx;right: 0;top: 136rpx;z-index: 4;}
			.jfsc{background: url('@/static/planting_trees/jfsc.png') no-repeat center center / cover;width: 88rpx;height: 88rpx;top: 236rpx;}
			.jfmx{background: url('@/static/planting_trees/jfmx.png') no-repeat center center / cover;width: 88rpx;height: 88rpx;top: 356rpx}
			.trees-box{padding-top: 236rpx;position: relative;
					.tree{width: 750rpx;height: 862rpx;background: url('@/static/planting_trees/tree.png') no-repeat center center / cover;position: relative;
							.box-position{position: absolute;
									.lucky-bag-box{width: 120rpx;height: 120rpx;position: relative;
											.lucky-bag-bg{background: url('@/static/planting_trees/lucky-bag-bg.png') no-repeat center center / cover;width: 100%;height: 100%;position: absolute;z-index: 1;animation:anifd 1.3s linear infinite;}
											.lucky-bag{ animation:shake 1s linear infinite;background: url('@/static/planting_trees/lucky-bag.png') no-repeat center center / cover;width: 96rpx;height: 96rpx;z-index: 2;}
									}
							}
							.box-position:nth-child(1){left: 80rpx;top: 276rpx;}
							.box-position:nth-child(2){left: 126rpx;top: 144rpx;}
							.box-position:nth-child(3){left: 256rpx;top: 72rpx;}
							.box-position:nth-child(4){left: 236rpx;top: 216rpx;}
							.box-position:nth-child(5){left: 220rpx;top: 336rpx;}
							.box-position:nth-child(6){left: 422rpx;top: 60rpx;}
							.box-position:nth-child(7){left: 392rpx;top: 180rpx;}
							.box-position:nth-child(8){left: 376rpx;top: 300rpx;}
							.box-position:nth-child(9){left: 538rpx;top: 190rpx;}
							.box-position:nth-child(10){left: 532rpx;top: 324rpx;}
					}
					.receive{position: absolute;bottom: 216rpx;right: 154rpx;width: 124rpx;height: 124rpx;background: url('@/static/planting_trees/receive.png') no-repeat center center / cover;}
					.billboard{position: absolute;bottom: -30rpx;left: 50%;transform: translateX(-50%);;width: 404rpx;height: 270rpx;background: url('@/static/planting_trees/billboard.png') no-repeat center center / cover;text-align: center;padding-top: 72rpx;color: #8E390B;font-size: 32rpx;font-weight: bold;box-sizing: border-box;
							span{color: #FF361A;}
					}
			}
			.box-position{position: absolute;
					.lucky-bag-box{width: 120rpx;height: 120rpx;position: relative;
							.lucky-bag-bg{background: url('@/static/planting_trees/lucky-bag-bg.png') no-repeat center center / cover;width: 100%;height: 100%;position: absolute;z-index: 1;animation:anifd 1.3s linear infinite;}
							.lucky-bag{background: url('@/static/planting_trees/lucky-bag.png') no-repeat center center / cover;width: 96rpx;height: 96rpx;z-index: 2;}
					}
			}

			.yq-btn{width: 424rpx;height: 112rpx;background: url('@/static/planting_trees/btn.png') no-repeat center center / cover;color: #fff;font-size: 32rpx;margin: 62rpx auto 0;position: relative;
					&:active{filter: sepia(50%)}
			}
			// 引导窗口
			.guide-box{z-index: 4;position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba($color: #000000, $alpha: .5);
					.guide{position: relative;
							.pointer{width: 90rpx;height: 90rpx;background: url('@/static/planting_trees/pointer.png') no-repeat center center / cover;position: absolute;top: 690rpx;left: 174rpx;transition: all .3s;
									&-1{transform: rotate(-145deg);top: 1138rpx;left: 330rpx;}
							}
							.pointer-txt-1{width: 256rpx;height: 32rpx;background: url('@/static/planting_trees/txt-1.png') no-repeat center center / cover;position: absolute;top: 770rpx;left: 264rpx;}
							.pointer-txt-2{width: 448rpx;height: 32rpx;background: url('@/static/planting_trees/txt-2.png') no-repeat center center / cover;position: absolute;top: 1064rpx;left: 50%;transform: translateX(-50%);}
							.zdl{width: 200rpx;height: 80rpx;background: url('@/static/planting_trees/zdl.png') no-repeat center center / cover;position: absolute;top: 834rpx;left: 474rpx;transition: all .3s;
									&-1{left: 474rpx;top: 1150rpx;}
							}
					}
			}
			.overlay{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba($color: #000000, $alpha: .5);z-index: 5;
					.box{width: 526rpx;padding: 0 70rpx 26rpx;background: #96E1FF;border-radius: 48rpx;position: relative;
							.close{width: 48rpx;height: 48rpx;background: url('@/static/planting_trees/close.png') no-repeat center center / cover;position: absolute;right: 32rpx;top: 32rpx;}
							.box-top{width: 309rpx;height: 84rpx;background: url('@/static/planting_trees/window-top-bg.png') no-repeat center center / cover;margin: 0 auto;color: #fff;font-size: 32rpx;}
							.con{width: 100%;padding: 32rpx 0;flex-direction: column;background: #fff;border-radius: 24rpx;box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0,0,0,0.16);margin:40rpx 0 24rpx;
									p{font-size: 28rpx;line-height: 40rpx;color: #333333;}
									.bag-box{width: 162rpx;height: 162rpx;border-radius: 24rpx;background: #C5D0FD;margin-top: 24rpx;}
							}
							.p{color: #666;font-size: 24rpx;text-align: center;}
							.ok-btn{width: 276rpx;height: 96rpx;background: url('@/static/planting_trees/btn-1.png') no-repeat center center / cover;color: #fff;font-size: 32rpx;margin: 24rpx auto 0;
									&:active{filter: sepia(50%)}
							}
					}
					// 活动规则
					.rule{width: 526rpx;background: #96E1FF;border-radius: 48rpx;
							.box-top{width: 309rpx;height: 84rpx;background: url('@/static/planting_trees/window-top-bg.png') no-repeat center center / cover;margin: 0 auto;color: #fff;font-size: 32rpx;}
							.con{background: #fff;padding: 40rpx 35rpx 32rpx 56rpx;border-radius: 24rpx;margin-top: 18rpx;
									ul{list-style: none;font-size: 28rpx;color: #333333;
											li{position: relative;margin-bottom: 32rpx;
													&:nth-last-child(1){margin: 0}
													&::after{content: '';display: block;clear: both;background: #3cd4cf;width: 16rpx;height: 16rpx;border-radius: 50%;position: absolute;left: -24rpx;top: 12rpx}
											}
									}
									.ok-btn{width: 276rpx;height: 96rpx;background: url('@/static/planting_trees/btn-1.png') no-repeat center center / cover;color: #fff;font-size: 32rpx;margin: 24rpx auto 0;
											&:active{filter: sepia(50%)}
									}
							}
					}
			}
			// 积分领取弹窗
			.integral-window{z-index: 5;position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba($color: #000000, $alpha: .5);
					.box{width: 526rpx;padding: 0 70rpx 48rpx;background: #96E1FF;border-radius: 48rpx;position: relative;
							.close{width: 48rpx;height: 48rpx;background: url('@/static/planting_trees/close.png') no-repeat center center / cover;position: absolute;right: 32rpx;top: 32rpx;}
							.box-top{width: 309rpx;height: 84rpx;background: url('@/static/planting_trees/window-top-bg.png') no-repeat center center / cover;margin: 0 auto;color: #fff;font-size: 32rpx;}
							.con{width: 100%;padding: 32rpx 0;flex-direction: column;background: #fff;border-radius: 24rpx;box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0,0,0,0.16);margin:40rpx 0 24rpx;
									h3{font-size: 28rpx;color: #333;font-weight: 500;text-align: center;margin-bottom: 16rpx;}
									.integral-box{padding:0 32rpx 30rpx;border-bottom: 2rpx dotted #CCCCCC;overflow-x: auto;
											.integral-item{width: 120rpx;height: 120rpx;background: #C5D0FD;border-radius: 24rpx;margin-right: 24rpx;flex-shrink: 0;flex-direction: column;color: #333;font-size: 28rpx;
													.integral-img{width: 50rpx;height: 50rpx;background: url('@/static/planting_trees/integral.png') no-repeat left center / auto 110%;background-position: 1rpx;border-radius: 50%;margin-bottom: 4rpx;}
													&:nth-last-child(1){margin: 0}
											}
									}
									.goods-box{padding-top: 32rpx;
											.box-tit{text-align: center;font-size: 28rpx;font-weight: bold;margin-bottom: 16rpx;span{color: #FF0000;}}
											p{text-align: center;color: #8099FF;font-size: 24rpx;margin-bottom: 16rpx;}
											.goods-img{width: 160rpx;height: 160rpx;border-radius: 16rpx;overflow: hidden;margin: 0 auto 12rpx;}
											.goods-title{font-size: 28rpx;color: #333;text-align: center;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;}
									}
									.ok-btn{width: 276rpx;height: 96rpx;background: url('@/static/planting_trees/btn-1.png') no-repeat center center / cover;color: #fff;font-size: 32rpx;margin: 24rpx auto 0;
											&:active{filter: sepia(50%)}
									}
							}
							.p{color: #666;font-size: 24rpx;text-align: center;margin-bottom: 8rpx;line-height: 32rpx}
							.go-mall{font-size: 28rpx;color: #546CCB;text-align: center;}
					}
			}
			@keyframes anifd{ 0%{ transform: rotate(0deg) scale(1);opacity: 1;} 50%{ transform: rotate(180deg) scale(1.1);opacity: 0;} 100%{ transform: rotate(360deg) scale(1);opacity: 1;};}
			@keyframes shake { 0%,100%{-webkit-transform: translateX(0)} 10%,30%,50%,70%,90%{ -webkit-transform: translateX(-5rpx);} 20%,40%,60%,80%{ -webkit-transform: translateX(5rpx);} }
    }
</style>

